<template>
  <el-card>
    <div
      style="display: flex; justify-content: space-between;"
    >
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-position="right"
        label-width="80px"
      >
        <el-form-item label="图书名称" prop="category_name">
          <el-input
            v-model.trim="queryParams.category_name"
            placeholder="请输入图书名称"
            clearable
            @keyup.enter.native="getList"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList()">
            查询
          </el-button>
        </el-form-item>
      </el-form>
      <el-button type="info" @click="showForm()">
        添加图书类型
      </el-button>
    </div>
    <el-table :data="dataList" border style="width: 100%">
      <el-table-column prop="id" label="类型编号" align="center" />
      <el-table-column
        prop="category_name"
        label="图书类型"
        align="center"
      />
      <el-table-column
        prop="create_time"
        label="创建时间"
        align="center"
      >
        <template #default="scope">
          {{ dateFormat(scope.row.create_time) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="update_time"
        label="更新时间"
        align="center"
      >
        <template #default="scope">
          {{ dateFormat(scope.row.update_time) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="200">
        <template #default="scope">
          <el-button text type="primary" @click="showForm(scope.row)">
            编辑
          </el-button>
          <el-button type="danger" text @click="handleDel(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      background
      layout="sizes, prev, pager, next"
      :total="total"
      v-model:current-page="page.pageIndex"
      v-model:page-size="page.pageSize"
      :page-sizes="[6, 10, 20, 50]"
      @current-change="changePage"
      @size-change="changeSize"
    />
  </el-card>
  <EditForm ref="editFormRef" @on-reset="getList" />
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getCategoryPageListApi, delCategoryApi } from '@/api/category';
import { dateFormat } from '@/utils/filters';
import EditForm from './components/edit-form/index.vue'
const editFormRef = ref();
const queryParams = ref({ category_name: '' });
const page = ref({
  pageIndex: 1,
  pageSize: 10
});
const total = ref<number>(0);
const dataList = ref<any[]>([]);
const changePage = (index: number): void => {
  page.value.pageIndex = index;
  getList();
};
const changeSize = (size: number): void => {
  page.value.pageSize = size;
  getList();
};
// 获取用户列表
const getList = (): void => {
  const params = Object.assign(page.value, queryParams.value);
  getCategoryPageListApi(params).then((res: any) => {
    dataList.value = res.list;
    total.value = res.total;
  });
};
const showForm = (data?: any): void => {
  editFormRef.value.showForm(data)
}
// 删除用户
const handleDel = (id: number): void => {
  delCategoryApi(id).then((_res: any) => {
    getList();
  });
};
onMounted(async () => {
  getList();
});
</script>
<style scoped lang="scss"></style>
